<div class="row align-items-center justify-content-between">
    <div class="col-md-auto col-sm-auto">
        <div class="content-header mt-2">
            <h1>Notifications</h1>
        </div>
    </div>
</div>
<div class="loading-shade" *ngIf="notificationSource.loading$ | async">
    <mat-spinner></mat-spinner>
</div>
<div class="box box-primary">
    <div class="box-body">
        <div class="table-responsive">
            <table class="table notification-table" mat-table [dataSource]="notificationSource">
                <ng-container matColumnDef="id">
                    <td mat-header-cell *matHeaderCellDef class="col-md-10"> Notifications</td>
                    <td mat-cell *matCellDef="let notification" class="notification-row col-md-10">
                        <span *ngIf="!notification.isRead" class="unread-notification badge badge-success">New</span>
                        <ng-container *ngIf="notification.folderId">
                            <blockquote class="blockquote mb-0">
                                <div class="form-row align-items-center">
                                    <div class="col-md-auto col-auto">
                                        <i class="fas fa-folder folder-list text-main mr-2"></i>
                                    </div>
                                    <div class="col-md col">
                                        <div class="row">
                                            <div class="col-md col fs-17">
                                                <span class="link-button" role="button"
                                                    (click)="onNotificationClick(notification)">
                                                    {{notification.folderName | limitTo: 50}}
                                                </span>
                                                shared by {{notification.fromUserName}}
                                                <div class="blockquote-footer fs-13">
                                                    {{notification.createdDate | dateAgo}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </blockquote>
                        </ng-container>
                        <ng-container *ngIf="!notification.folderId">
                            <blockquote class="blockquote mb-0">
                                <div class="form-row align-items-center">
                                    <div class="col-md-auto col-auto">
                                        <img [src]="notification.documentThumbnail" alt="" class="mr-2">
                                    </div>
                                    <div class="col-md col">
                                        <div class="row">
                                            <div class="col-md col fs-17">
                                                <span role="button" class="link-button"
                                                    (click)="onNotificationClick(notification)">
                                                    {{notification.documentName | limitTo: 50}}
                                                </span>
                                                shared by {{notification.fromUserName}}
                                                <div class="blockquote-footer fs-13">
                                                    {{notification.createdDate | dateAgo}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </blockquote>
                        </ng-container>
                    </td>
                </ng-container>
                <ng-container matColumnDef="action">
                    <td mat-header-cell *matHeaderCellDef class="col-md-2">Mark As Read </td>
                    <td mat-cell *matCellDef="let notification" class="notification-row col-md-2">
                        <blockquote class="blockquote mb-0" style="margin: 10px;">
                            <div class="form-row align-items-center">
                                <span *ngIf="!notification.isRead" (click)="markAsReadNotification(notification)"
                                    class="material-icons text-primary" matTooltip="Mark as read" role="button">
                                    check_box
                                </span>
                            </div>
                        </blockquote>
                    </td>
                </ng-container>
                <ng-container matColumnDef="footer">
                    <td mat-footer-cell *matFooterCellDef class="col-md-12">
                        <mat-paginator [length]="notificationResource.totalCount"
                            [pageSize]="notificationResource.pageSize" [pageSizeOptions]="[15, 20, 30]"></mat-paginator>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
            </table>
            <div class="card border-primary text-center empty-folder mt-1" *ngIf="notificationSource.count == 0">
                <div class="card-body">
                    <div>
                        <p>
                            <span>
                                <i class="fa fa-bell text-primary fa-5x" aria-hidden="true"></i>
                            </span>
                        </p>
                        <h5 class="text-dark">
                            You don't have any notification.
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>